<template>
  <div class="cu-common-layout cu-common-decoration">
    <div class="cu-common-layout-center">
      <el-row class="cu-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="4">
            <el-form-item label="校区品牌" prop="brand">
              <el-select v-model="query.brand" clearable required :style="{ width: '100%' }">
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="校区信息">
              <!-- 校区信息查询：使用下拉框统一查询方式，支持检索与清除 -->
              <el-select v-model="query.campusId" placeholder="请选择校区" clearable filterable :loading="campusLoading" @focus="loadCampusOptions" :style="{ width: '100%' }">
                <el-option v-for="item in campusOptions" :key="item.id" :label="item.fullName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="cu-common-layout-main cu-flex-main">
        <div class="cu-common-head">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()" v-has="'btn_add'">新增</el-button>
            <el-button type="text" icon="el-icon-download" @click="exportData()" v-has="'btn_download'">导出</el-button>
          </div>
          <div class="cu-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh cu-common-head-icon" :underline="false" @click="reset()" />
            </el-tooltip>
            <screenfull isContainer />
          </div>
        </div>
        <custom-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange" size="small">
          <el-table-column label="校区品牌" width="80" prop="brand" align="center">
            <template slot-scope="scope">
              {{ scope.row.brand | dynamicCodeText(brandOptions) }}
            </template>
          </el-table-column>
          <el-table-column label="校区名称" minWidth="200" prop="campusId" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.id | dynamicText(campusOptions) }}
            </template>
          </el-table-column>
          <el-table-column prop="usableArea" label="使用面积(平米)" width="120" align="left" />
          <el-table-column prop="classroomCount" label="规划教师(间)" width="100" align="left" />
          <el-table-column prop="degreeCount" label="规划学位(个)" width="100" align="left" />
          <el-table-column prop="dormitoryCount" label="宿舍数量(间)" width="100" align="left" />
          <el-table-column prop="bedCount" label="规划床位(个)" width="100" align="left" />
          <el-table-column prop="startDate" label="开工时间" width="100" :formatter="custom.tableDateFormat" align="center" />
          <el-table-column prop="furation" label="工期时常" width="100" align="left" />
          <el-table-column prop="designer" label="设计师" width="100" align="left" />
          <el-table-column prop="designer" label="设计图" width="100" align="left">
            <template slot-scope="scope">
              <el-dropdown @command="viewOrUpdateHandle">
                <el-button type="text" size="small">
                  预览
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in scope.row.floorPlanArray" :key="item.fileId" :command="item">{{ item.name }}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!--              <el-button type="text" @click="viewOrUpdateHandle(scope.row)">预览</el-button>-->
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="提交时间" width="100" :formatter="custom.tableDateFormat" align="center" />
          <el-table-column prop="createUserName" label="提交人" width="80" />
          <el-table-column label="操作" fixed="right" align="center" width="160">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editOrUpdateHandle(scope.row.id, true, scope.row)">施工</el-button>
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, true, scope.row)" v-has="'btn_edit'">编辑</el-button>
              <el-button type="text" size="small" @click="editOrUpdateHandle(scope.row.id, false, scope.row)">详情</el-button>
              <el-button type="text" size="small" @click="handleDel(scope.row.id)" class="cu-table-delBtn" v-has="'btn_remove'">删除</el-button>
            </template>
          </el-table-column>
        </custom-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
      </div>
    </div>
    <custom-form v-if="formVisible" ref="CustomForm" @refresh="refresh" />
    <custom-edit-form v-if="formEditVisible" ref="CustomEditForm" @refresh="refresh" />
    <custom-view-form v-if="formViewVisible" ref="CustomViewForm" />
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
  </div>
</template>
<script>
export { default } from './index.js'
</script>
<style lang="scss" scoped>
@import url(index.scss);
</style>
